React ErrorBoundary: エラーの分離と回復戦略

動的なフロントエンド開発の世界では、特にReactのような複雑なコンポーネントベースのフレームワークを扱う場合、予期せぬエラーは避けられません。これらのエラーは、正しく処理されないと、アプリケーションのクラッシュやユーザー体験の低下につながる可能性があります。ReactのErrorBoundaryコンポーネントは、これらのエラーを適切に処理し、分離し、回復戦略を提供するための堅牢なソリューションを提供します。この包括的なガイドでは、ErrorBoundaryの力を探求し、グローバルなオーディエンス向けに、より回復力があり、ユーザーフレンドリーなReactアプリケーションを構築するために効果的に実装する方法を示します。

エラー境界(Error Boundary)の必要性を理解する

実装に入る前に、なぜエラー境界が不可欠なのかを理解しましょう。Reactでは、レンダリング中、ライフサイクルメソッド内、または子コンポーネントのコンストラクタで発生したエラーは、アプリケーション全体をクラッシュさせる可能性があります。これは、キャッチされなかったエラーがコンポーネントツリーを上に伝播し、しばしば空白の画面や役に立たないエラーメッセージにつながるためです。日本のユーザーが重要な金融取引を完了しようとしているときに、一見無関係なコンポーネントの軽微なエラーのために空白の画面に遭遇することを想像してみてください。これは、プロアクティブなエラー管理の重要な必要性を示しています。

エラー境界は、子コンポーネントツリーのどこででもJavaScriptエラーをキャッチし、それらのエラーをログに記録し、コンポーネントツリーをクラッシュさせる代わりにフォールバックUIを表示する方法を提供します。これにより、問題のあるコンポーネントを分離し、アプリケーションの一部のエラーが他の部分に影響を与えるのを防ぎ、グローバルでより安定した信頼性の高いユーザー体験を保証できます。

React ErrorBoundaryとは何か？

ErrorBoundaryは、子コンポーネントツリーのどこででもJavaScriptエラーをキャッチし、それらのエラーをログに記録し、フォールバックUIを表示するReactコンポーネントです。これは、以下のライフサイクルメソッドのいずれかまたは両方を実装するクラスコンポーネントです。

• static getDerivedStateFromError(error): このライフサイクルメソッドは、子孫コンポーネントによってエラーがスローされた後に呼び出されます。スローされたエラーを引数として受け取り、コンポーネントの状態を更新するための値を返す必要があります。
• componentDidCatch(error, info): このライフサイクルメソッドは、子孫コンポーネントによってエラーがスローされた後に呼び出されます。スローされたエラーと、どのコンポーネントがエラーをスローしたかに関する情報を含むinfoオブジェクトの2つの引数を受け取ります。このメソッドを使用して、エラー情報をログに記録したり、他の副作用を実行したりできます。

基本的なErrorBoundaryコンポーネントの作成

基本的な原則を説明するために、基本的なErrorBoundaryコンポーネントを作成してみましょう。

コード例

以下は、シンプルなErrorBoundaryコンポーネントのコードです。

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false,
 error: null,
 errorInfo: null,
 };
 }

 static getDerivedStateFromError(error) {
 // 次のレンダリングでフォールバックUIが表示されるようにstateを更新します。
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // "componentStack"の例:
 //   in ComponentThatThrows (created by App)
 //   in App
 console.error("Caught an error:", error);
 console.error("Error info:", info.componentStack);
 this.setState({ error: error, errorInfo: info });
 // エラー報告サービスにエラーをログ記録することもできます
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // 任意のカスタムフォールバックUIをレンダリングできます
 return (
 

 
問題が発生しました。
 
Error: {this.state.error && this.state.error.toString()}
 

 {this.state.errorInfo && this.state.errorInfo.componentStack}
 
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

解説

• コンストラクタ: コンストラクタは、コンポーネントのstateをhasErrorをfalseに設定して初期化します。デバッグ目的でerrorとerrorInfoも保存します。
• getDerivedStateFromError(error): この静的メソッドは、子コンポーネントによってエラーがスローされたときに呼び出されます。エラーが発生したことを示すためにstateを更新します。
• componentDidCatch(error, info): このメソッドは、エラーがスローされた後に呼び出されます。エラーと、コンポーネントスタックに関する情報を含むinfoオブジェクトを受け取ります。ここでは、エラーをコンソールにログ記録します（Sentry、Bugsnag、またはカスタムの社内ソリューションなど、お好みのロギングメカニズムに置き換えてください）。また、stateにerrorとerrorInfoを設定します。
• render(): renderメソッドはhasError stateをチェックします。trueの場合はフォールバックUIをレンダリングし、それ以外の場合はコンポーネントの子をレンダリングします。フォールバックUIは有益でユーザーフレンドリーであるべきです。エラーの詳細とコンポーネントスタックを含めることは開発者にとって役立ちますが、セキュリティ上の理由から、本番環境では条件付きでレンダリングするか、削除する必要があります。

ErrorBoundaryコンポーネントの使用

ErrorBoundaryコンポーネントを使用するには、エラーをスローする可能性のあるコンポーネントをそれでラップするだけです。

コード例

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
 return (
 

 {/* エラーをスローする可能性のあるコンポーネント */}
 
 
 );
}

function App() {
 return (
 
 
 
 );
}

export default App;

解説

この例では、MyComponentはErrorBoundaryでラップされています。MyComponentまたはその子コンポーネント内でエラーが発生した場合、ErrorBoundaryがそれをキャッチしてフォールバックUIをレンダリングします。

高度なErrorBoundary戦略

基本的なErrorBoundaryは基本的なレベルのエラーハンドリングを提供しますが、エラー管理を強化するために実装できるいくつかの高度な戦略があります。

1. 粒度の細かいエラー境界

アプリケーション全体を単一のErrorBoundaryでラップする代わりに、粒度の細かいエラー境界を使用することを検討してください。これには、エラーが発生しやすい、または障害が発生しても影響が限定的なアプリケーションの特定の部分の周りにErrorBoundaryコンポーネントを配置することが含まれます。たとえば、個々のウィジェットや外部データソースに依存するコンポーネントをラップすることができます。

例

function ProductList() {
 return (
 

 {/* 商品のリスト */}
 
 );
}

function RecommendationWidget() {
 return (
 
 {/* レコメンデーションエンジン */}
 
 );
}

function App() {
 return (
 

 
 
 
 );
}

この例では、RecommendationWidgetには独自のErrorBoundaryがあります。レコメンデーションエンジンが失敗しても、ProductListには影響せず、ユーザーは引き続き商品を閲覧できます。この粒度の細かいアプローチは、エラーを分離し、アプリケーション全体に連鎖するのを防ぐことで、全体的なユーザー体験を向上させます。

2. エラーのロギングと報告

エラーをログに記録することは、デバッグや再発する問題を特定するために不可欠です。componentDidCatchライフサイクルメソッドは、Sentry、Bugsnag、Rollbarなどのエラーロギングサービスと統合するのに最適な場所です。これらのサービスは、スタックトレース、ユーザーコンテキスト、環境情報を含む詳細なエラーレポートを提供し、問題を迅速に診断して解決できるようにします。GDPRなどのプライバシー規制への準拠を確保するために、エラーログを送信する前に機密性の高いユーザーデータを匿名化または編集することを検討してください。

例

import * as Sentry from "@sentry/react";

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false,
 };
 }

 static getDerivedStateFromError(error) {
 // 次のレンダリングでフォールバックUIが表示されるようにstateを更新します。
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // Sentryにエラーをログ記録します
 Sentry.captureException(error, { extra: info });
 // エラー報告サービスにエラーをログ記録することもできます
 console.error("Caught an error:", error);
 }

 render() {
 if (this.state.hasError) {
 // 任意のカスタムフォールバックUIをレンダリングできます
 return (
 

 
問題が発生しました。
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

この例では、componentDidCatchメソッドはSentry.captureExceptionを使用してSentryにエラーを報告します。Sentryを設定してチームに通知を送信することで、重大なエラーに迅速に対応できます。

3. カスタムフォールバックUI

ErrorBoundaryによって表示されるフォールバックUIは、エラーが発生した場合でもユーザーフレンドリーな体験を提供する機会です。一般的なエラーメッセージを表示する代わりに、ユーザーを解決策に導くより有益なメッセージを表示することを検討してください。これには、ページを更新する方法、サポートに連絡する方法、または後で再試行する方法に関する指示が含まれる場合があります。発生したエラーの種類に基づいてフォールバックUIを調整することもできます。

例

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false,
 error: null,
 };
 }

 static getDerivedStateFromError(error) {
 // 次のレンダリングでフォールバックUIが表示されるようにstateを更新します。
 return {
 hasError: true,
 error: error,
 };
 }

 componentDidCatch(error, info) {
 console.error("Caught an error:", error);
 // エラー報告サービスにエラーをログ記録することもできます
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // 任意のカスタムフォールバックUIをレンダリングできます
 if (this.state.error instanceof NetworkError) {
 return (
 

 
ネットワークエラー
 
インターネット接続を確認して、もう一度お試しください。
 
 );
 } else {
 return (
 

 
問題が発生しました。
 
ページを更新するか、サポートにお問い合わせください。
 
 );
 }
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

この例では、フォールバックUIはエラーがNetworkErrorであるかどうかをチェックします。もしそうなら、ユーザーにインターネット接続を確認するように指示する特定のメッセージを表示します。それ以外の場合は、一般的なエラーメッセージを表示します。具体的で実行可能なガイダンスを提供することで、ユーザー体験を大幅に向上させることができます。

4. リトライメカニズム

場合によっては、エラーは一時的なものであり、操作を再試行することで解決できます。ErrorBoundary内にリトライメカニズムを実装して、一定の遅延後に失敗した操作を自動的に再試行することができます。これは、ネットワークエラーや一時的なサーバーの停止を処理する場合に特に役立ちます。副作用がある可能性のある操作に対してリトライメカニズムを実装する際には注意してください。再試行すると意図しない結果につながる可能性があります。

例

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
 const [data, setData] = useState(null);
 const [error, setError] = useState(null);
 const [isLoading, setIsLoading] = useState(true);
 const [retryCount, setRetryCount] = useState(0);

 useEffect(() => {
 const fetchData = async () => {
 setIsLoading(true);
 try {
 const response = await fetch('https://api.example.com/data');
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 const result = await response.json();
 setData(result);
 setError(null);
 } catch (e) {
 setError(e);
 setRetryCount(prevCount => prevCount + 1);
 } finally {
 setIsLoading(false);
 }
 };

 if (error && retryCount < 3) {
 const retryDelay = Math.pow(2, retryCount) * 1000; // 指数バックオフ
 console.log(`Retrying in ${retryDelay / 1000} seconds...`);
 const timer = setTimeout(fetchData, retryDelay);
 return () => clearTimeout(timer); // アンマウントまたは再レンダリング時にタイマーをクリーンアップ
 }

 if (!data) {
 fetchData();
 }

 }, [error, retryCount, data]);

 if (isLoading) {
 return 
データをロード中...
;
 }

 if (error) {
 return 
Error: {error.message} - {retryCount}回リトライしました。
;
 }

 return 
Data: {JSON.stringify(data)}
;
}

function App() {
 return (
 
 
 
 );
}

export default App;

この例では、DataFetchingComponentはAPIからデータを取得しようとします。エラーが発生した場合、retryCountをインクリメントし、指数関数的に増加する遅延の後に操作を再試行します。ErrorBoundaryは、処理されなかった例外をキャッチし、リトライ試行回数を含むエラーメッセージを表示します。

5. エラー境界とサーバーサイドレンダリング (SSR)

サーバーサイドレンダリング（SSR）を使用する場合、エラーハンドリングはさらに重要になります。サーバーサイドレンダリングプロセス中に発生したエラーは、サーバー全体をクラッシュさせ、ダウンタイムやユーザー体験の低下につながる可能性があります。エラー境界がサーバーとクライアントの両方でエラーをキャッチするように正しく構成されていることを確認する必要があります。多くの場合、Next.jsやRemixのようなSSRフレームワークには、React Error Boundaryを補完する独自の組み込みエラーハンドリングメカニズムがあります。

6. エラー境界のテスト

エラー境界が正しく機能し、期待されるフォールバックUIを提供することを確認するためには、エラー境界のテストが不可欠です。JestやReact Testing Libraryのようなテストライブラリを使用して、エラー条件をシミュレートし、エラー境界がエラーをキャッチして適切なフォールバックUIをレンダリングすることを確認します。エラー境界が堅牢であり、さまざまなシナリオを処理できるように、さまざまな種類のエラーやエッジケースをテストすることを検討してください。

例

import { render, screen } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function ComponentThatThrows() {
 throw new Error('This component throws an error');
 return 
This should not be rendered
;
}

test('renders fallback UI when an error is thrown', () => {
 render(
 
 
 
 );

 const errorMessage = screen.getByText(/Something went wrong/i);
 expect(errorMessage).toBeInTheDocument();
});

このテストは、ErrorBoundary内でエラーをスローするコンポーネントをレンダリングします。次に、エラーメッセージがドキュメントに存在するかどうかを確認することで、フォールバックUIが正しくレンダリングされることを検証します。

7. グレースフル・デグラデーション

エラー境界は、Reactアプリケーションでグレースフル・デグラデーションを実装するための重要なコンポーネントです。グレースフル・デグラデーションとは、アプリケーションの一部が失敗した場合でも、機能が低下した状態で動作し続けるようにアプリケーションを設計することです。エラー境界を使用すると、失敗したコンポーネントを分離し、アプリケーションの他の部分に影響を与えるのを防ぐことができます。フォールバックUIと代替機能を提供することで、エラーが発生した場合でもユーザーが必須機能にアクセスできるようにすることができます。

避けるべき一般的な落とし穴

ErrorBoundaryは強力なツールですが、避けるべき一般的な落とし穴がいくつかあります。

• 非同期コードをラップしない: ErrorBoundaryは、レンダリング中、ライフサイクルメソッド内、およびコンストラクタ内のエラーのみをキャッチします。非同期コード（例：setTimeout、Promises）のエラーは、try...catchブロックを使用してキャッチし、非同期関数内で適切に処理する必要があります。
• エラー境界の使いすぎ: アプリケーションの大部分を単一のErrorBoundaryでラップすることは避けてください。これにより、エラーの原因を特定することが困難になり、一般的なフォールバックUIが頻繁に表示される可能性があります。特定のコンポーネントや機能を分離するために、粒度の細かいエラー境界を使用してください。
• エラー情報を無視する: エラーをキャッチしてフォールバックUIを表示するだけではいけません。エラー情報（コンポーネントスタックを含む）をエラー報告サービスまたはコンソールに必ずログ記録してください。これにより、根本的な問題を診断して修正するのに役立ちます。
• 本番環境で機密情報を表示する: 本番環境で詳細なエラー情報（例：スタックトレース）を表示することは避けてください。これにより、機密情報がユーザーに公開され、セキュリティリスクになる可能性があります。代わりに、ユーザーフレンドリーなエラーメッセージを表示し、詳細な情報をエラー報告サービスにログ記録してください。

関数コンポーネントとフックでのエラー境界

エラー境界はクラスコンポーネントとして実装されますが、フックを使用する関数コンポーネント内のエラーを効果的に処理するために使用できます。一般的なアプローチは、以前に示したように、関数コンポーネントをErrorBoundaryコンポーネントでラップすることです。エラーハンドリングロジックはErrorBoundary内に存在し、関数コンポーネントのレンダリング中またはフックの実行中に発生する可能性のあるエラーを効果的に分離します。

具体的には、関数コンポーネントのレンダリング中またはuseEffectフックの本体内でスローされたエラーは、ErrorBoundaryによってキャッチされます。ただし、ErrorBoundaryは、関数コンポーネント内のDOM要素にアタッチされたイベントハンドラ（例：onClick、onChange）内で発生したエラーはキャッチしないことに注意することが重要です。イベントハンドラについては、引き続き従来のエラーハンドリングのためにtry...catchブロックを使用する必要があります。

エラーメッセージの国際化と地域化

グローバルなオーディエンス向けのアプリケーションを開発する場合、エラーメッセージを国際化および地域化することが重要です。ErrorBoundaryのフォールバックUIに表示されるエラーメッセージは、より良いユーザー体験を提供するために、ユーザーの優先言語に翻訳する必要があります。i18nextやReact Intlなどのライブラリを使用して、翻訳を管理し、ユーザーのロケールに基づいて適切なエラーメッセージを動的に表示できます。

i18nextを使用した例

import i18next from 'i18next';
import { useTranslation } from 'react-i18next';

i18next.init({
  resources: {
    en: {
      translation: {
        'error.generic': 'Something went wrong. Please try again later.',
        'error.network': 'Network error. Please check your internet connection.',
      },
    },
    fr: {
      translation: {
        'error.generic': 'Une erreur est survenue. Veuillez réessayer plus tard.',
        'error.network': 'Erreur réseau. Veuillez vérifier votre connexion Internet.',
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // not needed for react as it escapes by default
  },
});

function ErrorFallback({ error }) {
  const { t } = useTranslation();

  let errorMessageKey = 'error.generic';
  if (error instanceof NetworkError) {
    errorMessageKey = 'error.network';
  }

  return (
    

      
{t('error.generic')}
      
{t(errorMessageKey)}
    
  );
}

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);
  const [error, setError] = useState(null);

  static getDerivedStateFromError = (error) => {
    // Update state so the next render will show the fallback UI
    // return { hasError: true }; // this doesn't work with hooks as is
    setHasError(true);
    setError(error);
  }

  if (hasError) {
    // You can render any custom fallback UI
    return ;
  }

  return children;
}

export default ErrorBoundary;

この例では、i18nextを使用して英語とフランス語の翻訳を管理しています。ErrorFallbackコンポーネントは、useTranslationフックを使用して、現在の言語に基づいて適切なエラーメッセージを取得します。これにより、ユーザーは自分の優先言語でエラーメッセージを見ることができ、全体的なユーザー体験が向上します。

結論

ReactのErrorBoundaryコンポーネントは、堅牢でユーザーフレンドリーなReactアプリケーションを構築するための重要なツールです。エラー境界を実装することで、エラーを適切に処理し、アプリケーションのクラッシュを防ぎ、世界中のユーザーにより良いユーザー体験を提供できます。エラー境界の原則を理解し、粒度の細かいエラー境界、エラーロギング、カスタムフォールバックUIなどの高度な戦略を実装し、一般的な落とし穴を避けることで、グローバルなオーディエンスのニーズを満たす、より回復力があり信頼性の高いReactアプリケーションを構築できます。真に包括的なユーザー体験を提供するために、エラーメッセージを表示する際には国際化と地域化を考慮することを忘れないでください。Webアプリケーションの複雑さが増し続けるにつれて、エラーハンドリング技術を習得することは、高品質のソフトウェアを構築する開発者にとってますます重要になります。